<style type="text/css">
	.layui-table-cell{
		height: auto; /* */
	}
	.layui-table-cell img{
		width: 80px;
		height: 80px;
	}
</style>
<style type="text/css">
	#demo2 img{
		width: 92px;
		height: 92px;		
	}
	#demo2 span{
		position: relative;
	}
	#demo2 span:hover::after{
		content:"x";
		display: block;
		background-color: #FF5722;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		position: absolute;
		line-height: 16px;
		color: #fff;
		text-align: center;
		top: -40px;
		right: 0px;
	}
</style>
<fieldset class="layui-elem-field layui-field-title">
  <legend>分类列表</legend>
</fieldset>
<table id="list" lay-filter="list" ></table>
<script type="text/html" id = "bar">
    {{# if(d.status == 1){	}}
	<a class="layui-btn layui-btn-sm" lay-event="recover">恢复</a>
	{{# } }}
	{{# if(d.status == 0){	 }}
	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
	{{# } }}
	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
</script>
<script type="text/html" id="pictures">
	{{#
		for(var i = 0; i < d.pictures.length; i++){
	}}
		<img src="http://127.0.0.1:9000/upload/{{d.pictures[i].name}}" />
	{{#
		}	
	}} 
</script> 
<script type="text/html" id="edit">
	<form class="layui-form">
		<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text"  name="name" class="layui-input" placeholder="请输入商品名"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">一级分类</label>
			<div class="layui-input-inline">
				<select name="parent" lay-filter="parent"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">二级分类</label>
			<div class="layui-input-inline">
				<select name="goodsSortId"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-inline">
				<input type="text"  name="dscp" class="layui-input" placeholder="描述一下你的商品吧！"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">价格</label>
			<div class="layui-input-inline">
				<input type="number"  name="price" class="layui-input" placeholder="输入商品价格"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">型号</label>
			<div class="layui-input-inline">
				<input type="text"  name="version" class="layui-input" placeholder="型号"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">颜色</label>
			<div class="layui-input-inline">
				<input type="text"  name="color" class="layui-input" placeholder="输入颜色"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">照片</label>
			<div class="layui-input-inline">
				<!-- 使用layui的上传图片的插件 -->
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
				  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; width: 300px;">
				    
				    <div class="layui-upload-list" id="demo2"></div>
				 </blockquote>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">数量</label>
			<div class="layui-input-inline">
				<input type="number"  name="count" class="layui-input" placeholder="数量"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn layui-btn-danger" 
					lay-submit lay-filter="edit">修改分类</button>
			</div>	
	</form>
</script>


<script type="text/javascript">
	layui.use(['table','upload','form','element'],function(){
		var table = layui.table;
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		var $ = layui.$;
		
		table.render({
			id:'list',
			elem:'#list',
			height:600,
			url:'http://localhost:9000/api/goods',
			//where:{parent:0},
			method:'get',
			page:true,
			cols:[[
				{field: 'id',title:'ID',width: 100},
				{field:'name',title:'名字'},
				{field:'dscp',title:'描述'},
				{title:'图片',templet:"#pictures",width: 200},
				{field:'price',title:'价格'},
				{field:'version',title:'版本'},
				{field:'color',title:'颜色'},
				{field:'suit',title:'wowow'},
				{field:'count',title:'数量'},
				 {field:'goodsSortId',title:'一级分类',templet:function(d){
					return d.goodsSort.parentSort == null ? '' :d.goodsSort.parentSort.name;
				}},
				{field:'goodsSortId',title:'二级分类',templet:function(d){
					return d.goodsSort.name;
				}}, 
				{field:'status',title:'状态',templet:function(d){
					return ['正常','下架'][d.status];
				},width : 100},
				{title:'操作',toolbar:'#bar',width: 150,fixed:'right'}
			]],
			parseData: function(res){
				return{
					"code":0,
					"msg":res.data.msg,
					"count":res.data.total,
					"data":res.data.list
				};
			},
			done: function(res, curr, count){
							// 固定列高度适应
							$(".layui-table-main  tr").each(function (index ,val) {
								$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
							});
						}
		});
		
		table.on('tool(list)',function(obj){
			//obj 工具条所在的这一行数据
			var data = obj.data;
			var layEvent = obj.event;
			var tr = obj.tr;	
			
			if(layEvent == 'delete'){
				layer.confirm('确定删除吗？',function(index){
					
					layer.close(index);
					$.ajax({
						url:'http://127.0.0.1:9000/api/goods',
						type:'delete',
						data:{id:obj.data.id},
						dataType:'',
						success:function(data){
							if(data.status == 200){
								layer.msg("删除成功");
							}else if (data.status == 404){
								layui.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){
							
						}
					});
				});
				
				
			}else if (layEvent == 'recover'){
				 layer.confirm("要恢复吗？" ,function(index){
					layer.close(index);
					$.ajax({
						url:'http://127.0.0.1:9000/api/goods/'+obj.data.id,
						type:'get',
						dataType:'json',
						success: function(data){
							if(data.status == 201){
								layer.msg("恢复成功");
							}else{
								layer.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){
							
						}
					});
				}); 
			}else if(layEvent == 'edit'){
				var index =layer.open({
					type:1,
					title:'编辑商品',
					area:['500px','400px'],
					content:$('#edit').html()
				});
				$("input[name='id']").val(data.id);
				$("input[name='name']").val(data.name); 
				$("input[name='dscp']").val(data.dscp); 
				$("input[name='version']").val(data.version);
				$("input[name='color']").val(data.color); 
				$("input[name='price']").val(data.price); 
				 /* $("input[name='suit']").val(data.suit); */
				$("input[name='count']").val(data.count); 
				$.each(data.pictures,function(index,item){
					$('#demo2').append('<span><img src="http://127.0.0.1:9000/upload/'+ item.name +'"class="layui-upload-img">'+
															'<input type="hidden" name="pictures" value="'+item.name+'" /></span>')
				});
				//多图片上传
				  upload.render({
				    elem: '#test2'
				    ,url: 'http://127.0.0.1:9000/api/upload' //此处配置你自己的上传接口即可
				    ,multiple: true
				    ,done: function(res){
				      //上传完毕 没上传一张图片，都会响应一次
							   $('#demo2').append('<span><img src="http://127.0.0.1:9000/upload/'+ res.data +'"class="layui-upload-img">'+
										'<input type="hidden" name="pictures" value="'+res.data+'" /></span>')
				    }
				  });
				  
				  //添加图片点击事件  
				  $("#demo2").on("click","span",function(){
								$(this).remove();
				  });
				
				//一级分类
				$.ajax({
					url:'http://127.0.0.1:9000/api/goodsSorts',
					type:'get',
					dataType:'json',
					success:function(data){
						
						var html = "<option value=''>请选选择分类</option>"
						$.each(data.data.list,function(index,item){
							if(obj.data.goodsSort.parent == item.id){
								html+='<option value="'+item.id+'" selected="selected">'+item.name+'</option>';
							}else{
								html+='<option value="'+item.id+'">'+item.name+'</option>';
							}							
						});
						$("select[name='parent']").html(html);
						form.render();
						//二级分类
						$.ajax({
							url:'http://localhost:9000/api/goodsSorts',
							type:'get',
							data:{parent:obj.data.goodsSort.parent},
							dataType:'json',
							success:function(data){
								var html = "<option value=''>请选择二级分类</option>";
								$.each(data.data.list,function(index,item){
									if(item.id == obj.data.goodsSortId){
										html += "<option value='"+item.id+"' selected='selected'>"+item.name+"</option>"
									}else{
										html += "<option value='"+item.id+"'>"+item.name+"</option>"
									} 
									
								});
								$("select[name='goodsSortId']").html(html);
								form.render();
							},
							error:function(){
								
							}
						});
							
						// 一二级的联动 		联动
						form.on('select(parent)',function(data){
							var parent = data.value; 
							if(parent > 0){
								$.ajax({
									url:'http://localhost:9000/api/goodsSorts',
									type:'get',
									data:{parent:parent},
									dataType:'json',
									success:function(data){
										var html = "<option value=''>请选择二级分类</option>";
										$.each(data.data.list,function(index,item){
											html += "<option value='"+item.id+"'>"+item.name+"</option>"
										});
										$("select[name='goodsSortId']").html(html);
										form.render();
									},
									error:function(){
										
									}
								});	
							}
						});
					},
					error:function(){
						
					}
				});
				
				
	
				//提交
				form.on('submit(edit)',function(data){
					var pictures = [];
					$("input[name='pictures']").each(function(){
						pictures.push({name:$(this).val()} );
					});
					data.field.pictures = pictures;
					$.ajax({
						url:'http://127.0.0.1:9000/api/goods',
						type:'put',
						data:JSON.stringify(data.field),
						contentType:'application/json; charset=utf-8',
						dataType:'json',
						success:function(data){
							if(data.status == 201){
								layer.msg("修改成功！");
								layer.close(index);
								table.reload('list');
								/* gotoUrl("goods/list.html"); */
							}else{
								layer.msg(data.msg);
							}
						},
						error:function(){
							
						}
					});
					
					return false;
				});
				
				
			}			
		});
		
		function gotoUrl(url){
			if(url == undefined){
				alert("没有链接");
				return;
			}
			// 使用Ajax请求url
			$.ajax({
				url: url,
				type: 'get',
				data: {},
				dataType: 'html',
				success:function(data){
					$(".layui-body>div").html(data);
				},
				error:function(){
					
				}
			});
		}	
	});
</script>

